<template>
  <div class="box">
    <header class="tou">
      <van-search show-action placeholder="OPPO A3" @search="onSearch">
        <template #action>
          <button style="border: none; background: white">登录</button>
        </template>
      </van-search>
    </header>
    <main class="zhong">
      <!-- 轮播图 -->
      <van-swipe :autoplay="3000" lazy-render>
        <van-swipe-item v-for="image in images" :key="image">
          <img :src="image" style="width: 400px; height: 200px" />
        </van-swipe-item>
      </van-swipe>

      <van-grid>
        <van-grid-item icon="https://img1.360buyimg.com/n6/jfs/t1/124431/8/47213/33684/6710af55Fad6c06ea/613f8a970b6d0355.png" text="手机" />
        <van-grid-item icon="https://img1.360buyimg.com/n6/jfs/t1/194422/2/48882/73826/6710e527F4d0f0713/21ab2da0be7bb320.jpg" text="平板" />
        <van-grid-item icon="https://img1.360buyimg.com/n6/jfs/t1/245151/26/20367/72787/6710df22Ffc762578/2187f1cdaa7f4d91.jpg" text="穿戴" />
        <van-grid-item icon="https://img1.360buyimg.com/n6/jfs/t1/167634/29/49651/49722/670bd183F982229ea/91e19b448527a29e.jpg" text="声学" />
      </van-grid>
      <div>
        <img src="@/assets/00.png" alt="" style="width: 400px;">
      </div>
    </main>
  </div>
</template>
<script setup>
const images = [
  "https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg",
  "https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg",
];
</script>